<script setup>
import { nextTick, reactive, ref } from "vue";

const searchForm = ref();
const searchListTable = ref();
const searchModel = ref({});
const scroll = {
    x: 1500,
    y: 800
}

const columns = [
    { title: '档案号', dataIndex: 'docCode', width: 100 },
    { title: '职务', dataIndex: 'applyPost', width: 80 },
    { title: '姓名', dataIndex: 'enName', width: 150 },
    { title: '年龄', dataIndex: 'age', width: 80 },
    { title: '国籍', dataIndex: 'country', width: 100 },
    { title: '船东', dataIndex: 'shipOwner', width: 80 },
    { title: '船名', dataIndex: 'shipName', width: 150 },
    { title: '上船日期', dataIndex: 'shipOnTime', width: 120 },
    { title: '离船日期', dataIndex: 'shipOffTime', width: 120 },
    { title: '电话号码', dataIndex: 'phone', width: 140 },
    { title: '应急联系电话', dataIndex: 'contactNumber', width: 140 },
    { title: '备注', dataIndex: 'remark', width: 150 },
    { title: '联系人', dataIndex: 'contactPeople', width: 100 },
    { title: '宗教', dataIndex: 'religion', width: 80 },
    { title: '生日', dataIndex: 'birthday', width: 120 },
    { title: '护照', dataIndex: 'passport', width: 120 },
    { title: '护照到期日', dataIndex: 'passportExpiryDate', width: 120 },
    { title: '海员证', dataIndex: 'seamanCert', width: 80 },
    { title: '海员证到期日', dataIndex: 'seamanExpiryDate', width: 120 },
    { title: '操作', slotName: 'action', fixed: 'right', width: 150 },
];

const reset = () => {
    searchForm.value.resetFields();
}

const search = () => {
    searchListTable.value.load();
}

</script>
<template>
    <div class="main-con">
        <a-card style="margin-bottom: 10px;">
            <a-form ref="searchForm" :model="searchModel" layout="inline">
                <a-form-item field="enName" label="姓名">
                    <a-input v-model="searchModel.enName" @press-enter="search" placeholder="输入姓名查询"></a-input>
                </a-form-item>
                <a-form-item field="passport" label="护照号">
                    <a-input v-model="searchModel.passport" @press-enter="search" placeholder="输入护照号查询"></a-input>
                </a-form-item>
                <a-form-item field="applyPost" label="职务">
                    <a-input v-model="searchModel.applyPost" @press-enter="search" placeholder="输入职务查询"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-space>
                        <a-button type="primary" @click="search">查询</a-button>
                        <a-button @click="reset">重置</a-button>
                    </a-space>
                </a-form-item>
            </a-form>
        </a-card>
        <search-table ref="searchListTable" :scroll="scroll" :columns="columns" url="/biz/crew/page"
            :params="searchModel">
            <template #toolbar>
            </template>
        </search-table>

    </div>
</template>
<style scoped></style>